<template>
  <div class="content common-card">
    <dc-header :page-to="'/home/reports'" :title="'风险稽核'" :rightIcon="''"></dc-header>
    <div class="content-body">
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate" :startTime="this.curDate.startTime" :startDateType="this.curDate.type"></dc-date>
      <div class="mt20">
        <dc-cell title="风险操作金额统计"></dc-cell>
        <div class="common-chart" id="riskColumn"></div>
      </div>
      <div class="mt20 bg-white pt20 pb20 aln-center bottom">
        <router-link :to="{path: '/backCharge', query:{num:1,currentDate: this.currentDate, mny: riskMoney.returnMny}}"
                     class="br jus" tag="div">
          <div class="label" @click.native="saveT">退单次数</div>
          <div><tshSpan :value ='riskMoney.returnNum' class="num" ></tshSpan><i class="iconfont icon-right iconSize"></i></div>
        </router-link>
        <router-link class="jus"
                     :to="{path:'/backCharge', query:{num:2,currentDate: this.currentDate, mny: riskMoney.cancelMny}}"
                     tag="div">
          <div class="label" @click="saveT">返位单数</div>
          <div><tshSpan :value ='riskMoney.cancelNum' class="num" ></tshSpan><i class="iconfont icon-right iconSize"></i></div>
        </router-link>
      </div>
      <div class="bg-white pt20 pb20 aln-center">
        <router-link class="jus br"
                     :to="{path:'/backCharge', query:{num:3,currentDate: this.currentDate, mny: riskMoney.presentMny}}"
                     tag="div">
          <div class="label" @click="saveT">赠单次数</div>
          <div><tshSpan :value ='riskMoney.presentNum' class="num" ></tshSpan><i class="iconfont icon-right iconSize"></i></div>
        </router-link>
        <router-link class="jus"
                     :to="{path:'/backCharge', query:{num:4,currentDate: this.currentDate, mny: riskMoney.zeroMny}}"
                     tag="div">
          <div class="label" @click="saveT">宴请次数</div>
          <div><tshSpan :value ='riskMoney.zeroNum' class="num" ></tshSpan><i class="iconfont icon-right iconSize"></i></div>
        </router-link>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import cell from '@/common/plugins/cell';
  import {initColumn} from '@/common/echarts/column';
  import api from '@/common/api/riskAudit';
  import date from '@/common/plugins/datetabbar/all';
  import {mapActions, mapGetters} from 'vuex';
  export default {
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'dc-date': date
    },
    data () {
      return {
        riskMoney: {
          returnNum: 0,
          cancelNum: 0,
          presentNum: 0,
          zeroNum: 0
        },
        currentDate: {},
        column: null
      };
    },
    created () {
      if (this.curDate) {
        this.currentDate = {
          type: this.curDate.type,  //时间范围标识，1-日；2-周；3-月；4-年
          startTime: this.curDate.startTime,
          endTime: this.curDate.endTime
        };
      }
    },
    activated () {
      if (this.curDate) {
        this.currentDate = {
          type: this.curDate.type,  //时间范围标识，1-日；2-周；3-月；4-年
          startTime: this.curDate.startTime,
          endTime: this.curDate.endTime
        };
      }
    },
    mounted: function () {
      this.column = initColumn('#riskColumn');
      this.initPeriodColumns();
    },
    computed: {
      ...mapGetters(['curDate'])
    },
    methods: {
      ...mapActions({saveDate: 'saveDate', clearDate: 'clearDate'}),
      getDate (date) {
        if (date) {
          this.saveDate(date);
          this.currentDate = date;
          this._sysRiskColumn();
        }
      },
      saveT () {
        this.saveDate(this.currentDate);
      },
      _sysRiskColumn () {
        this.column.showLoading();
        let data = {
          timeFlag: this.currentDate.type,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        api.getRiskColumn(data).then(res => {
          if (res) {
            this.riskMoney = res || [];
          }
          this.initPeriodColumns();
        }, () => this.initPeriodColumns());
      },
      initPeriodColumns () {
        this.column.hideLoading();
        this.column.setOption({
          color: ['#78ACF2'],
          xAxis: [
            {
              type: 'category',
              data: ['退单', '返位单', '赠单', '宴请']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '操作金额'
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '60%',
              data: [this.riskMoney.returnMny || 0, this.riskMoney.cancelMny || 0, this.riskMoney.presentMny || 0, this.riskMoney.zeroMny || 0]
            }
          ]
        });
      }
    },
    beforeRouteLeave (to, from, next) {
      // 返回home页后清空日期缓存
      if (to.path === '/home') {
        this.clearDate();
      }
      next();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .br {
    border-right: 1px solid #e6e6e6;
  }

  .bottom {
    border-bottom: 1px solid #e6e6e6;
  }

  .aln-center {
    display: flex;
    align-items: center;
    line-height: px2rem(60px);
  }

  .jus {
    display: flex;
    flex: 1 auto;
    justify-content: space-around;
  }

  .iconSize {
    font-size: px2rem(28px);
    color: #888;
  }

  .num {
    font-weight: bold;
    color: #7b78f2;
    font-size: px2rem(32px);
  }

  .label {
    font-size: px2rem(28px);
    color: #666;
  }

  .pt20 {
    padding-top: px2rem(20px);
  }

  .pl {
    padding-left: px2rem(20px);
  }

  .pr {
    padding-right: px2rem(20px);
  }
</style>
